<template>
  <div>

    <div v-if="dbsx" class="dbsx1">
      <div class="wid">
      
        <div id="logocenter">
          <div id="nav">
            <ul>
              <li @click="wz">
                <router-link to="/" :class="activeClass == 1 ? 'on':''">API</router-link>
              </li>
              <li @click="wz">
                <router-link to="/doc" :class="activeClass == 2 ? 'on':''">参考文档</router-link>
              </li>
            </ul>
          </div>
        </div>
        <div id="logoright">
        
          <div id="logindiv">
            <div id="nologinbox" v-if="!sfdl">
              <a
                href="javascript:;"
                class="on"
                @click="jlogin()"
              >登录</a>

              <a
               href="javascript:;"
                @click="jzc()"
                class="nav-register-btn"  
              >免费注册</a>

              <!-- <span>|</span>
              <a href="register.html" rel="nofollow">注册</a>-->
            </div>

            <div id="logindiv" v-if="sfdl"> <div class="header-btn1"  @click="tc">退出</div>
              <div id="logininbox">
                <a
                  href="https://dainfo.hsaeyz.cn:9046/data-center/#/home"
                  id="currentUser"
                  class
                >{{uname}}</a>
              </div>
             
            </div>
          </div>
        </div>
        <div class="clear"></div>
      </div>

  
    </div>



    <div id="top" >
      <div class="wid">
        <div id="logo">
          <a href="">航盛聚合数据</a>
        </div>
        <div id="logocenter">
          <div id="nav">
            <ul>
              <li @click="wz">
                <router-link to="/" :class="activeClass == 1 ? 'on':''">API</router-link>
              </li>
              <li @click="wz">
                <router-link to="/doc" :class="activeClass == 2 ? 'on':''">参考文档</router-link>
              </li>
            </ul>
          </div>
        </div>
        <div id="logoright">
          <div id="searchbox">
            <el-input prefix-icon="iconfont icon-sousuo" v-model.trim="search_input" placeholder="请输入API名称，如：天气" id="keyword2"></el-input>

           
            <input type="submit" id="searchbtn" value="搜索" @click="search" />
          </div>
          <div id="logindiv">
            <div id="nologinbox" v-if="!sfdl">
              <a
                href="javascript:;"
                class="on"
                @click="jlogin()"
              >登录</a>

              <a
                 href="javascript:;"
                @click="jzc()"
                class="nav-register-btn"
              >免费注册</a>

              <!-- <span>|</span>
              <a href="register.html" rel="nofollow">注册</a>-->
            </div>

            <div id="logindiv" v-if="sfdl"> <div class="header-btn1"  @click="tc">退出</div>
              <div id="logininbox">
                <a
                  href="https://dainfo.hsaeyz.cn:9046/data-center/#/home"
                  id="currentUser"
                  class
                >{{uname}}</a>
              </div>
             
            </div>
          </div>
        </div>
        <div class="clear"></div>
      </div>

      <div class="solution-banner-inner">
        <div class="solution-banner-ct">
          <h1 class="solution-banner-tit">航盛聚合平台</h1>
          <div class="solution-banner-des">
            <p>依托航盛聚合数据平台优势和汽车行业业务特性，提供车联网云、自动驾驶云、大数据、智慧出行等多种场景方案及服务，助力汽车行业的数字化升级和转型。</p>
          </div>
          <div class="solution-banner-btn">
            <a hotrep="solution.auto.banner.btn1" href="javascript:;" class="c-btn J-BannerBtn"   @click="xslxwm">立即咨询</a>
          </div>
        </div>
      </div>
    </div>

    <div class="c-section c-p-y-short sol-recommend overflow-hidden J-sectionCharacteristic">
      <div class="c-section-inner">
        <a class="anchor">&nbsp;</a>
        <ul class="c-grid c-grid-nocard-expand">
          <li class="c-g-6 s-12">
            <div class="c-media">
              <div class="c-media-img">
                <i
                  class="ico48 icocenter cvm"
                  style="background-image: url(https://main.qcloudimg.com/raw/116259269ffac1c14f8af1307358d17b.svg)"
                ></i>
              </div>
              <div class="c-media-body">
                <h4 class="c-media-heading">顶级的基础设施</h4>
                <p
                  class="c-media-info"
                >全球53个可用区，配备100+BGP网络，1300+个CDN节点，全网100Tbps+带宽资源储备，支持全球范围高速接入。</p>
              </div>
            </div>
          </li>
          <li class="c-g-6 s-12">
            <div class="c-media">
              <div class="c-media-img">
                <i
                  class="ico48 icocenter cvm"
                  style="background-image: url(https://main.qcloudimg.com/raw/c31c937025ec539e7353e443f3bc57f8.svg)"
                ></i>
              </div>
              <div class="c-media-body">
                <h4 class="c-media-heading">灵活的用云模式</h4>
                <p class="c-media-info">支持公有云、私有云和混合云使用模式，配套开发运维一体化平台，助力车企传统业务及新业务快速上云。</p>
              </div>
            </div>
          </li>
          <li class="c-g-6 s-12">
            <div class="c-media">
              <div class="c-media-img">
                <i
                  class="ico48 icocenter cvm"
                  style="background-image: url(https://main.qcloudimg.com/raw/1028bd2a58047f7b006cd62a61451f19.svg)"
                ></i>
              </div>
              <div class="c-media-body">
                <h4 class="c-media-heading">强大的技术优势</h4>
                <p class="c-media-info">依托航盛在物联网、云计算、人工智能、大数据等方面的技术积累，为汽车行业客户提供前沿的技术支持。</p>
              </div>
            </div>
          </li>
          <li class="c-g-6 s-12">
            <div class="c-media">
              <div class="c-media-img">
                <i
                  class="ico48 icocenter cvm"
                  style="background-image: url(https://main.qcloudimg.com/raw/9cc6a187e1b0fb9bee4041214d95c792.svg)"
                ></i>
              </div>
              <div class="c-media-body">
                <h4 class="c-media-heading">丰富的生态体系</h4>
                <p class="c-media-info">借助航盛的音乐、视频等内容生态，以及合作伙伴生态圈助力汽车产业与消费者形成更具开放性的新型连接生态。</p>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <div id="apilbox2" style="padding-top:50px;"></div>





    </div>
</template>

<script>
export default {
  name: "Header",
  data() {
    return {
      search_input: "",
      childByValue: [],
      sfdl: false,
      dbsx:false,
      uname: "个人中心",
      lxwm:true
    };
  },

  props: ["activeClass", "asfdl", "auname"],

 components: {},
  mounted() {
    // 此处true需要加上，不加滚动事件可能绑定不成功
    window.addEventListener("scroll", this.handleScroll, true);
    
    var utoken = localStorage.getItem("USER_TOKEN");
    console.log("utoken",utoken);
    
    if(utoken){
      this.sfdl = true;
      var una = localStorage.getItem("USER");
      una = JSON.parse(una)
      console.log(una.username);
      this.uname = una.username;
    }

    localStorage.removeItem("preurl");
  },
  methods: {

    jlogin(){
       var ta = window.location.href;
            localStorage.setItem("preurl",ta);
            console.log("https://dainfo.hsaeyz.cn:9046/data-center/#/login?url="+ta);
            
            window.location.href ="https://dainfo.hsaeyz.cn:9046/data-center/#/login?url="+ta;
    },

    
    jzc(){
        localStorage.setItem("type","register");
        var ta = window.location.href;
            localStorage.setItem("preurl",ta);
            console.log("https://dainfo.hsaeyz.cn:9046/data-center/#/login?type=register&url="+ta);
            
            window.location.href ="https://dainfo.hsaeyz.cn:9046/data-center/#/login?type=register&url="+ta;
    },


    xslxwm(){
                this.$emit("xslxwm")
            },
    handleScroll() {
      let scrolltop =
        document.documentElement.scrollTop || document.body.scrollTop;
      scrolltop > 200 ? (this.dbsx = true) : (this.dbsx = false);
    },

    wz: function(){

      document.querySelector("#apilbox2").scrollIntoView({
      behavior: "smooth"
  })

   let scrolltop =
        document.documentElement.scrollTop || document.body.scrollTop;
      scrolltop > 200 ? (this.dbsx = true) : (this.dbsx = false);

    this.dbsx = true ;
      console.log("22222222222",this.dbsx);

    },

    tc:function(){
       localStorage.removeItem('USER_TOKEN');
      location.reload();
      
    },

  

    search: function() {
      const search_input = this.search_input;
      console.log("111111",search_input);
      var _this = this;

            if (search_input != "") {

            var cc = window.location.href;
            console.log(cc);
            console.log("cccccc",cc.indexOf("/doc"));
            
              if(cc.indexOf("/doc") == "-1"){
      
               this.$http({
                    url: "index/search?key=" + search_input,
                    method: "get"
                  }).then(res => {
                    console.log(res.data);

                    _this.findService = res.data.datas;
                    _this.apisum = res.data.datas.length;


                    _this.$emit("findService", _this.findService); //发射、广播出去 主要这里
                    _this.$emit("apisum", _this.apisum); //发射、广播出去 主要这里

                    document.querySelector("#apilbox2").scrollIntoView(true)

                  });



              }else{

                _this.$router.push("/");
                console.log();
                localStorage.setItem("search_ip",search_input);
                console.log("222222",search_input);


                 
              }
          







            }

    }
  }
};
</script>

<style rel="stylesheet/less" lang="less" scoped>
#top {
  height: 550px;
  background: center center #222733;
  overflow: hidden;
  background-size: cover;
  padding: 0 20px;
  transition: height 0.4s;
  -webkit-transition: height 0.4s;
  -moz-transition: height 0.4s;
  position: relative;
  background-image: url(../../assets/images/topbj.jpg);
}

.solution-banner-inner {
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  padding: 135px 0 0 5px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding: 102px 0 0 10px;
}

.solution-banner-ct {
  color: #fff;
  width: 50%;
}
.solution-banner-tit {
  font-size: 46px;
  color: #fff;
  font-weight: 400;
  line-height: 1.4;
}

.solution-banner-des {
  color: #fff;
  line-height: 1.7;
  font-size: 14px;
  margin: 10px 0 15px;
}
.solution-banner-btn {
  font-size: 0;
}
.c-btn {
  height: 35px;
  min-width: 140px;
  padding: 0 20px;
  background-color: #00a4ff;
  color: #fff;
  font-size: 14px;
  line-height: 35px;
  text-align: center;
  display: inline-block;
  cursor: pointer;
  outline: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  vertical-align: middle;
  height: 35px;
  line-height: 35px;
  font-size: 14px;
}

.nav-register-btn {
  height: 35px;
  min-width: 140px;
  padding: 0 20px;
  background-color: #00a4ff;
  color: #fff;
  font-size: 14px;
  line-height: 35px;
  text-align: center;
  display: inline-block;
  cursor: pointer;
  outline: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  vertical-align: middle;
  height: 35px;
  line-height: 35px;
  font-size: 14px;

  width: 80px;
  min-width: 80px;
  height: 30px;
  line-height: 30px;
  padding: 0;
  text-align: center;
  margin: 0 10px;
  float: right;
  margin-top: 3px;
}

.c-section.c-p-y-short {
  padding: 45px 0 0px;
  position: relative;
  overflow: hidden;
}

.c-section-inner {
  margin: 0 auto;
  width: 100%;
  max-width: 1200px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding: 0 10px;
}
a.anchor {
  position: absolute;
  top: -50px;
}
.c-grid-nocard-expand {
  margin-left: -30px;
  margin-right: -30px;
  font-size: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.c-g-6 {
  width: 25%;
}
.c-grid [class*="c-g-"] {
  display: inline-block;
  zoom: 1;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 14px;
  padding-left: 10px;
  padding-right: 10px;
  vertical-align: top;
}
.c-media {
  line-height: 1.5;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: #fff;
  padding: 20px;
  display: block;
}
.c-media-img {
  width: 100%;
  text-align: center;
}
.sol-recommend .ico48 {
  width: 48px;
  height: 48px;
  display: block;
  margin: 0 auto;
}
.c-media-body {
  margin-top: 20px;
}
.c-media-heading {
  text-align: center;
  font-size: 18px;
  color: #333;
  margin: 0;
  padding: 0;
  font-weight: 400;
  line-height: 1.5;
}
.c-media-info {
  font-size: 14px;
  color: #666;
  margin-top: 10px;
  line-height: 1.7;
  word-wrap: break-word;
  text-align: center;
}
.header-btn1{
    display: inline-block;
    margin:7px -50px  0px 10px;
    padding: 0 15px;
    height: 22px;
    border: 2px solid rgba(255, 255, 255, .5);
    border-radius: 13px;
    text-align: center;
    color: #ffffff;
    font-size: 12px;
    line-height: 22px;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    float: right;
    cursor: pointer;
}
.header-btn1:hover{
  background:  #00a4ff;
  
}

.dbsx1{
position: fixed;
    top: 0;
    z-index: 1000;
    background: #fcfeff;
    width: 100%;
    height: 60px;
    padding: 0;
    -webkit-box-shadow: 0 2px 6px rgba(0,0,0,.22);
    box-shadow: 0 2px 6px rgba(0,0,0,.22);
}

.dbsx1 #nav li a {
    color: #333;
    display: block;
    text-align: center;
    font-size: 16px;
    line-height: 56px;
    margin-top: 0px;
}

.dbsx1 #logoright {
   color: #333;
    float: right;
    width: 250px;
    margin-top: 10px;
}

.dbsx1 #logininbox>a{
  color: #333;
}

.dbsx1 .header-btn1 {
    display: inline-block;
    margin: 7px -50px 0px 10px;
    padding: 0 15px;
    height: 22px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 13px;
    text-align: center;
    color: rgba(0, 0, 0, 0.7);
    font-size: 12px;
    line-height: 22px;
    background: rgba(0, 0, 0, 0.1);
    float:RIGHT;
    cursor: pointer;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
   
}
.dbsx1 .header-btn1:hover {
    display: inline-block;
    margin: 7px -50px 0px 10px;
    padding: 0 15px;
    height: 22px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 13px;
    text-align: center;
    color: #ffffff;
    font-size: 12px;
    line-height: 22px;
    background: #00a4ff;
    float:RIGHT;
    cursor: pointer;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}

.dbsx1 #nologinbox a {
    font-size: 15px;
    margin-left: 10px;
    margin-right: 10px;
 color: #00a4ff;
}

.dbsx1 #nologinbox a.nav-register-btn{
  color: #fff
}


</style>
